<template>
	<view class="page">
		<view class="mask" :style="{backgroundColor : maskBgc}">
		</view>
		<!-- 导航栏 -->
		<Navbar :showMenu="false" :showBack="true" :isDocument="false" :bgc="maskBgc" :iconColor="opacity <= 0.5 ? 'balck' : 'white'">
			<text v-show="opacity <= 0.5" style="font-weight: bolder;font-size: 34rpx;">{{userInfo.profile.nickname}}</text>
		</Navbar>

		<!-- 背景图 -->
		<view class="bg">
			<image :src="userInfo.profile.backgroundUrl" mode="aspectFill"></image>
		</view>

		<!-- 头部卡片 -->
		<view class="header-card">
			<view class="avatarImg" :style="{ opacity: opacity }">
				<image :src="userInfo.profile.avatarUrl" mode="widthFix"></image>
			</view>

			<view class="header-content">
				<view class="nickName">
					<text style="font-size: 36rpx;font-weight: bolder;">{{userInfo.profile.nickname}}</text>
				</view>
				<view class="nums">
					<text><text style="color: #000;font-weight: 26rpx;">{{userInfo.profile.follows}}</text> 关注</text>
					<text><text style="color: #000;font-weight: 26rpx;">{{userInfo.profile.followeds}}</text> 粉丝</text>
					<text style="color: #000;font-weight: 26rpx;">Lv.{{userInfo.level}}</text>
				</view>
				<view class="message">
					<text>{{userInfo.profile.signature}}</text>
				</view>
			</view>
		</view>

		<!-- swiper指示器 -->
		<u-sticky :offset-top="navbarHeight" @fixed="isSticky = true" @unfixed="isSticky = false">
			<view class="pageIndicator">
				<view class="pageIndicator-item" v-for="(item,index) in pageList" :key="index" @click="changeSwiper(index)">
					<text :class="currentPage == index ? 'active' : ''">{{item}}</text>
					<text v-if="index == 2 && userDynamicNum > 0" style="font-size: 24rpx;padding-left: 10rpx;">{{userDynamicNum}}</text>
				</view>
				<view class="bar" :style="{ width: barWidth + 'rpx', left: barLeftTemp + barLeft + 'rpx', transition: isClickTag ? `${animationTime}` : ''}"></view>
			</view>
		</u-sticky>

		<!-- 页面容器 -->
		<swiper :duration="600" :current="currentPage" @transition="animateChange" @animationfinish="animationEnd" :style="{ height: screenHeight - 200 - navbarHeight + 'rpx' }">
			<!-- 用户主页 -->
			<swiper-item>
				<scroll-view class="home" scroll-y="true" style="width: 750rpx;height: 100%;">
					<view class="userBaseInfo">
						<view class="text">
							<text>基本信息</text>
							<text>村龄:&nbsp;&nbsp;{{userInfo.createDays + '天'}}</text>
							<text>性别:&nbsp;&nbsp;{{userInfo.profile.gender == 1 ? '男' : '女'}}</text>
							<text>年龄:&nbsp;&nbsp;{{$tools.timestampToTime(userInfo.profile.birthday)}}</text>
						</view>
						<view class="allInfo">
							<text>查看全部</text>
							<image src="../../static/images/gengduo.png" mode="widthFix" style="width: 20rpx;"></image>
						</view>
					</view>
					<view class="musicTaste">
						<card :dataList="musicDataList">
							<text slot="cardName">音乐品味</text>
						</card>
					</view>

					<view class="collectSongList">
						<card :dataList="songListDate">
							<text slot="cardName">收藏的歌单(2)</text>
						</card>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 视频 -->
			<swiper-item>
				<view class="swiper-item">2</view>
			</swiper-item>
			<!-- 动态 -->
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 750rpx;height: 100%;">
					<view class="dynamicList" v-for="(item,index) in userDynamicList" :key="index">
						<view class="dynamicHeader">
							<view class="userImg">
								<image :src="item.user.avatarUrl" mode="widthFix"></image>
							</view>
							<view class="dynamicMessage">
								<view class="dynamicName">
									<text>{{item.user.nickname}}</text>
									<text>{{dynamicType[item.type]}}</text>
								</view>
								<view class="dynamicTime">
									<text>{{$tools.calcTime(item.showTime)}}</text>
								</view>
							</view>
						</view>

						<view class="dynamicTitle">
							<text>{{item.json.msg}}</text>
						</view>

						<view class="dynamicContent">
							<view class="dynamicImg">
								<image :src="dynamicType[item.type] == '分享歌单' ? item.json.playlist.coverImgUrl : item.json.song.img80x80" mode="widthFix"></image>
							</view>
							<view class="dynamicContentDetail">
								<text>{{dynamicType[item.type] == '分享歌单' ? item.json.playlist.name : item.json.song.name}}</text>
								<text>{{dynamicType[item.type] == '分享歌单' ? item.json.playlist.creator.nickname : item.json.song.artists[0].name}}</text>
							</view>
						</view>

						<view class="dynamicFooter">
							<view class="foot-left">
								<view class="foot-left-item">
									<image src="../../static/images/share.png" mode="widthFix"></image>
									<text>转发</text>
								</view>
								<view class="foot-left-item">
									<image src="../../static/images/comment.png" mode="widthFix"></image>
									<text>评论</text>
								</view>
								<view class="foot-left-item">
									<image :src="item.prise ? '../../static/images/prised.png' : '../../static/images/prise.png'" mode="widthFix"
									 @click="prise(item)"></image>
									<text>{{item.prise ? '1' : '赞'}}</text>
								</view>
							</view>
							<view class="foot-right">
								<image src="../../static/images/ddd-g.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<playMusicBar></playMusicBar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Navbar from '@/components/navbar.vue'
	import Card from '@/components/card.vue'
	import {
		getUserInfo,
		getUserDynamic,
		getUserSongList
	} from '@/api/user.js'
	export default {
		components: {
			Navbar,
			Card
		},
		data() {
			return {
				uid: '',
				// 用户信息
				userInfo: {
					profile: {
						nickname: '',
						backgroundUrl: ''
					}
				},
				// 当前swiper索引
				currentPage: 0,
				// swiper页面列表
				pageList: ['主页', '视频', '动态'],
				barWidth: 56,
				barLeft: 0,
				barLeftTemp: 120,
				barLeftTempArr: [120, 347, 574],
				isClickTag: false,
				maskBgc: '',
				isSticky: false,
				animationTime: '0.5s',
				userDynamicList: [],
				opacity: 1,
				dynamicType: {
					18: '分享单曲',
					19: '分享专辑',
					17: '分享电台节目',
					28: '分享电台节目',
					22: '转发',
					39: '发布视频',
					35: '分享歌单',
					13: '分享歌单',
					24: '分享专栏文章',
					41: '分享视频',
					21: '分享视频'
				},
				userDynamicNum: 0,
				// 音乐品味卡片数据
				musicDataList: [{
						type: 'listenTop',
						id: '',
						img: '/static/images/rank.png',
						title: '听歌排行',
						subTitle: '累计听歌171首'
					},
					{
						type: 'likeMusic',
						id: '',
						img: '/static/images/like.png',
						title: '我喜欢的音乐',
						subTitle: '5首,播放2次'
					}
				],
				// 我的歌单数据
				songListDate: []
			}
		},
		onLoad(data) {
			this.uid = uni.getStorageSync('userInfo').account.id
			// 获取用户信息
			getUserInfo(this.uid).then(res => {
				this.userInfo = res.data
			})
			// 获取用户动态
			getUserDynamic(this.uid).then(res => {
				this.userDynamicList = res.data.events
				this.userDynamicList.map(item => {
					item.json = JSON.parse(item.json)
					item.prise = false
				})
				this.userDynamicNum = res.data.size
			})
			// 获取用户歌单
			getUserSongList(this.uid).then(res => {
				// 我喜欢的音乐
				this.musicDataList[1].subTitle = `${res.data.playlist[0].trackCount}首,播放${res.data.playlist[0].playCount}次`
				// 歌单
				res.data.playlist.forEach((item, index) => {
					if (index != 0) {
						this.songListDate.push({})
						this.songListDate[index - 1].type = 'songList',
							this.songListDate[index - 1].id = item.id
						this.songListDate[index - 1].img = item.coverImgUrl
						this.songListDate[index - 1].title = item.name
						this.songListDate[index - 1].subTitle = `${item.trackCount}首,播放${item.playCount}次`
					}
				})
			})
		},
		computed: {
			...mapState(['pixelRatio', 'screenWidth', 'navbarMessage', 'screenHeight', 'navbarHeight'])
		},
		onPageScroll: function(e) {
			// 屏幕上下滚动时调节透明度
			let p = e.scrollTop * this.pixelRatio / (630 - this.navbarHeight)
			this.opacity = 1 - (p * 2)
			this.maskBgc = `rgba(255,255,255,${p})`
		},
		methods: {
			// swiper滑动时触发,用以设置swiper滑动时tab栏的动画
			animateChange(e) {
				let point = e.detail.dx * this.pixelRatio / 750
				if (this.isClickTag) {} else {
					this.barLeftTemp = this.currentPage > 0 ? this.barLeftTempArr[this.currentPage] : this.barLeftTempArr[0]
					if (e.detail.dx < 0) {
						this.barLeft = 227 * point
					} else if (e.detail.dx > 0) {
						this.barLeft = 227 * point
					}
				}
			},
			// 点击tab栏时的动画
			changeSwiper(index) {
				this.barLeft = 0
				let currentPageTemp = this.currentPage
				this.currentPage = index
				if (currentPageTemp == 0 && this.currentPage == 1) {
					this.animationTimingFn(400, 120, 347)
				} else if (currentPageTemp == 1 && this.currentPage == 2) {
					this.animationTimingFn(400, 347, 574)
				} else if (currentPageTemp == 2 && this.currentPage == 1) {
					this.animationTimingFn(400, 574, 347)
				} else if (currentPageTemp == 1 && this.currentPage == 0) {
					this.animationTimingFn(400, 347, 120)
				} else if (currentPageTemp == 0 && this.currentPage == 2) {
					this.animationTimingFn(400, 120, 574)
				} else if (currentPageTemp == 2 && this.currentPage == 0) {
					this.animationTimingFn(400, 574, 120)
				}
				this.isClickTag = true
			},
			// 翻页动画结束时调用
			animationEnd(e) {
				this.currentPage = e.detail.current
				this.isClickTag = false
			},
			// 动画函数
			animationTimingFn(timing, left1, left2) {
				const that = this
				that.animationTime = timing / 2000 + 's'
				if (left1 < left2) {
					that.barLeftTemp = left1 + (left2 - left1) / 3
					that.barWidth = (left2 - left1) / 2
				} else {
					that.barLeftTemp = left2 + (left1 - left2) / 3
					that.barWidth = (left1 - left2) / 2
				}
				setTimeout(function() {
					that.barWidth = 56
					that.barLeftTemp = left2
				}, timing / 2)
			},
			prise(item) {
				item.prise = (item.prise != true || item.prise == undefined) ? true : false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: relative;
		width: 750rpx;
		height: 450rpx;
		overflow: hidden;
		z-index: 1;
		border-radius: 100% 100% 100% 100% / 0% 0% 3% 3%;

		image {
			width: 750rpx;
		}
	}

	.header-card {
		position: relative;
		width: 690rpx;
		height: 260rpx;
		padding: 100rpx 30rpx 30rpx;
		margin: -40rpx 30rpx 30rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, .97);
		z-index: 10;

		.header-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 630rpx;
			height: 130rpx;

			.nums {
				text {
					padding: 0 15rpx;
					font-size: 24rpx;
					color: #444;
				}
			}

			.message {
				width: 100%;
				font-size: 26rpx;
				color: #444;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.avatarImg {
			position: absolute;
			top: -75rpx;
			left: 50%;
			transform: translate(-50%);
			width: 150rpx;
			height: 150rpx;
			padding: 5rpx;
			border-radius: 75rpx;
			background-color: #fff;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 70rpx;
			}
		}
	}

	.pageIndicator {
		position: relative;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		margin-bottom: 10rpx;
		align-items: center;
		margin-top: -20rpx;
		width: 750rpx;
		height: 100rpx;
		padding: 0 120rpx;

		.pageIndicator-item {
			position: relative;
			width: 56rpx;

			text {
				color: #444;
				border-bottom: 6rpx solid transparent;
				border-bottom-left-radius: 3rpx;

				&:nth-child(2) {
					position: absolute;
					top: -6rpx;
					right: -20rpx;
					font-size: 24rpx;
				}
			}
		}

		.active {
			// border-bottom: 6rpx solid $cloudMusic-tabActive-color;
			color: #000 !important;
		}
	}

	.bar {
		position: absolute;
		bottom: 20rpx;
		width: 30rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background-color: $cloudMusic-tabActive-color;
	}

	// 主页
	.home {
		.userBaseInfo {
			width: 690rpx;
			height: 280rpx;
			margin: 10rpx 30rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.text {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 690rpx;
				height: 210rpx;
				padding: 20rpx 20rpx 0;
				border-bottom: 1rpx solid #eee;

				text {
					&:first-child {
						font-size: 30rpx;
						font-weight: bolder;
					}

					&:not(:first-child) {
						font-size: 26rpx;
						color: #666;
						margin-left: 10rpx;
					}
				}
			}

			.allInfo {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 70rpx;
				color: #666;
				font-size: 24rpx;

				text {
					margin-right: 6rpx;
				}
			}
		}

		.musicTaste {
			margin: 20rpx 30rpx;
		}

		.collectSongList {
			margin: 0 30rpx;
		}
	}

	// 动态
	.dynamicList {
		width: 750rpx;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.dynamicHeader {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 80rpx;

			.userImg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
				}
			}

			.dynamicMessage {
				margin-left: 20rpx;

				.dynamicName {
					text {
						font-size: 26rpx;

						&:first-child {
							color: #4e7cae;
						}

						&:last-child {
							margin-left: 12rpx;
							color: #666;
						}
					}
				}

				.dynamicTime {
					font-size: 24rpx;
					color: #888;
				}
			}
		}

		.dynamicTitle {
			width: 690rpx;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 20rpx 0 100rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.dynamicContent {
			display: flex;
			align-items: center;
			width: 590rpx;
			height: 100rpx;
			margin-left: 100rpx;
			padding: 0 20rpx;
			border-radius: 12rpx;
			background-color: #f3f3f3;

			.dynamicImg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}
			}

			.dynamicContentDetail {
				margin-left: 10rpx;

				text {
					display: block;

					&:last-child {
						color: #666;
						font-size: 24rpx;
					}
				}
			}
		}

		.dynamicFooter {
			display: flex;
			align-items: center;
			width: 590rpx;
			height: 80rpx;
			margin-left: 100rpx;
			padding: 0 20rpx;
			border-radius: 12rpx;
			font-size: 24rpx;
			color: #666;

			// background-color: #888;
			image {
				width: 30rpx;
			}

			.foot-left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 400rpx;
				height: 100%;

				.foot-left-item {
					display: flex;
					align-items: center;
					height: 100%;

					text {
						margin-left: 8rpx;
					}
				}
			}

			.foot-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 190rpx;
				height: 100%;
			}
		}
	}

	.mask {
		position: absolute;
		width: 750rpx;
		height: 700rpx;
		left: 0;
		top: 0;
		z-index: 1000;
	}
</style>
